<template>
  <div class="dialog">
    <el-dialog
      title="开票"
      :visible.sync="isShowAutomaticInvoice"
      width="50%"
      :before-close="handleAutomaticInvoiceClose">
      <div class="ticket-info">开票信息</div>
       <el-table :data="multipleData" border stripe
                 :header-cell-style="{textAlign:'center'}"
                 :cell-style="{textAlign:'center'}"
       >
         <el-table-column prop="StudentNo" label="学生编号" width="200px"></el-table-column>
         <el-table-column prop="Name" label="学生姓名"></el-table-column>
         <el-table-column prop="SubjectName" label="学科名称"></el-table-column>
         <el-table-column prop="ClassName" label="课程名称"></el-table-column>
         <el-table-column label="课程价格">
           <template slot-scope="scope">
             <p>{{scope.row.Price | rounding}}</p>
           </template>
         </el-table-column>
       </el-table>
      <div class="total-price">开票价格总计 :{{totalPrice | rounding}}</div>
      <el-form v-model="form" v-loading="loading">
        <div class="image-box">
          <el-form-item label="签名照片 :">
            <upload-img
              :judge-id="0"
              :width="16"
              :height="9"
              @showImage="showSingImage"
            ></upload-img>
          </el-form-item>
          <el-form-item label="发票照片 :">
            <upload-img
              :judge-id="0"
              :width="16"
              :height="9"
              @showImage="showTicketImage"
            ></upload-img>
          </el-form-item>
        </div>
      </el-form>


      <span slot="footer" class="dialog-footer">
    <el-button @click="handleAutomaticInvoiceClose" :disabled="loading">取 消</el-button>
    <el-button type="primary" @click="submitEvent" :disabled="loading">确 定</el-button>
  </span>
    </el-dialog>

  </div>
</template>

<script>
import UploadImg from '../../../components/base/uploadPictures/UploadImg'
import CourseOrder from '../../../model/courseOrder'

export default {
  name: 'AutomaticInvoice',
  components: { UploadImg },
  props: {
    isShowAutomaticInvoice: Boolean,
    idList: Array,
    multipleData: Array
  },
  data () {
    return {
      loading: false,
      form: {
        IDList: this.idList,
        SignatureImage: '',
        InvoiceImage: ''
      },
      //展示总价格
      totalPrice:0
    }
  },
  created () {
    this.addCurriculumPrice()
    console.log(this.idList)
  },
  filters: {
    rounding (value) {
      return value.toFixed(2)
    }
  },
  methods: {
    handleAutomaticInvoiceClose (payload) {
      this.$emit('handleAutomaticInvoiceClose',payload)
    },
    async submitEvent () {
      if(this.form.SignatureImage===''){
        this.$message.error('签名照片为必传项，请上传')
      }else if(this.form.InvoiceImage===''){
        this.$message.error('发票照片为必传项，请上传')
      }else{
        try {
          this.loading = true
          await CourseOrder.OnlineInvoicing(this.form)
          this.$message.success('线上开票成功')
          this.loading = false
          this.handleAutomaticInvoiceClose('submitButton')
        } catch (err) {
          this.loading = false
        }
      }


    },
    //签名照片的回调
    showSingImage (result) {
      this.form.SignatureImage = result
    },
    //发票照片的回调
    showTicketImage (result) {
      this.form.InvoiceImage = result
    },
    //把勾选的需要开发票的课程价格加和
    addCurriculumPrice () {
        const res = this.multipleData.map(item => item.Price).reduce((pre, n) => pre + n)
        this.totalPrice=res
    }
  }
}
</script>

<style scoped>
.image-box {
  display: flex;
  margin-left: 30px;
}

.image-box div {
  flex: 1;
}

.show-box div {
  margin: 20px 0;
}

.total-price{
  padding: 30px;
  font-size: 14px;
  color: #DC143C;
  font-weight: bold;
}
.ticket-info{
  text-align: center;
  margin-bottom: 30px;
  font-size: 18px;
  font-weight: bold;
}

</style>
